<template>
<view>
	<view class="list" v-for="(item,index) in 5" @click="typeOpen">
		<view class="left">
			<image class="logo" src="@/static/logo.png"></image>
			<view class="bank">
				<view class="sup">银河期货</view>
				<view class="sub">
					<text>一对一服务</text>
					<text>国企背景</text>
					<text>国企背景</text>
				</view>
			</view>
		</view>
		<view class="open-btn" @click.stop="clickOpen">免费开户</view>
	</view>
	<view class="bottom-fit">
		<view class="bottom-btn" :style="{'padding-bottom':botOperateBut}">
			<view class="btns">新手开户指导</view>
			<view class="btns">在线客服</view>
		</view>
	</view>
	
	<view :hidden="!isOpen" class="isopen-modal" @touchmove.stop.prevent>
		<view class="shade"></view>
		<view class="isopen-box">
			<view class="content">
				<view class="bank-box">
					<image class="logo" src="@/static/logo.png"></image>
					<view class="bank">
						<view class="sup">银河期货优先开户</view>
						<view class="sub">
							<text>银河证券</text>
						</view>
					</view>
				</view>
				<input type="number" maxlength="11" placeholder-class="pipt" class="ipt" placeholder="请输入11位手机号码">
				<view class="kh-btn">立即开户</view>
				<view class="sub-info">开通后，次日您可享受以下特权:</view>
				<view class="flex-btn">
					<view class="btn">免排队开户服务</view>
					<view class="btn">VIP免费投顾</view>
				</view>
				<view class="hint">
					<text>
					我们会将您的号码提供给期货公司，
					以便为您提供一对一服务。
					</text>
				</view>
			</view>
			<view class="close" @click="closeOpen"><icon type="cancel" color="#ffffff" size="32"/></view>
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			botOperateBut:0,
			isOpen: false
		};
	},
	methods:{
		clickOpen(){
			this.isOpen =true;
		},
		closeOpen(){
			this.isOpen =false;
		},
		typeOpen(){
			uni.navigateTo({
				url: '/pages/homeSubpage/futuresInfo/futuresInfo'
			});
		},
	}
}
</script>

<style lang="scss">
page{
	background: #F6F7F9;
	box-sizing: border-box;
	padding:24rpx 32rpx;
}	
.list{
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-top:24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:26rpx 24rpx;
	.left{
		display: flex;
		align-items: center;
		.logo{
			width:64rpx;height:64rpx;
			margin-right:16rpx;
		}
		.bank{
			.sup{
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
				line-height: 44rpx;
			}
			.sub{
				font-size: 20rpx;
				color: rgba(0,0,0,0.4);
				margin-top:4rpx;
				& text{
					padding-right:16rpx;
				}
			}
		}
	}
	.open-btn{
		height: 64rpx;
		border-radius: 32rpx;
		border: 2rpx solid #EE5953;
		padding:0 24rpx;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #EE5953;
		box-sizing: border-box;
	} 
}
.list:first-child{
	margin-top:0;
}
.bottom-fit{
	position: fixed;
	left:0;bottom:0;
	width: 100%;
	padding:18rpx 32rpx;
	box-sizing: border-box;
	box-shadow: 0px 0 16rpx 2rpx rgba(51,51,51,0.2);
	background-color: #fff;
	z-index: 9;
	.bottom-btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btns{
			width: 326rpx;
			height: 88rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F4F5F7;
			text-align: center;
			line-height: 88rpx;
			font-size: 28rpx;
			color: rgba(0,0,0,0.8);
			box-sizing: border-box;
		}
		.btns:last-child{
			background: #EE5953;
			border:0;
			color:#fff;
		}
	}
}
.isopen-modal{
	.isopen-box{
		position: fixed;
		left:50%;top:50%;
		transform: translate(-50%,-50%);
		z-index: 100;
		.content{
			width: 654rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding:48rpx 32rpx 48rpx;
			box-sizing: border-box;
			.bank-box{
				display: flex;
				align-items: center;
				.logo{
					width:86rpx;height:86rpx;
					margin-right:16rpx;
				}
				.bank{
					.sup{
						font-size: 32rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
					.sub{
						font-size: 24rpx;
						color: rgba(0,0,0,0.8);
						line-height: 44rpx;
						margin-top:8rpx;
					}
				}
			}
			.ipt{
				height: 92rpx;
				background: #F4F5F7;
				border-radius: 16rpx;
				width: 100%;
				padding:24rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: rgba(0,0,0,0.8);
				margin-top:64rpx;
			}
			.pipt{
				color: #8E8E93;
			}
			.kh-btn{
				margin-top:24rpx;
				height: 88rpx;
				background: #EE5953;
				border-radius: 16rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				width:100%;
			}
			.sub-info{
				margin-top:48rpx;
				font-size: 24rpx;
				color: rgba(0,0,0,0.4);
				text-align: center;
			}
			.flex-btn{
				margin-top:16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.btn{
					width: 282rpx;
					height: 72rpx;
					background: rgba(238,89,83,0.08);
					border-radius: 16rpx;
					font-size: 28rpx;
					color: #EE5953;
					text-align: center;
					line-height: 72rpx;
				}
			}
			.hint{
				margin-top:58rpx;
				font-size: 24rpx;
				color: rgba(0,0,0,0.4);
				text-align: center;
			}
		}
	}
	.close{
		width: 64rpx;
		height: 64rpx;
		margin:32rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
